import styled from 'styled-components'
import icon2 from '@/assets/img/icon2.png'
import sprite_button2 from '@/assets/img/sprite_button2.png'
export const CommentsWarpper = styled.div`
   margin-top:100px;
   //发表评论
   .publishComment{
    .title{
       display:flex;
       border-bottom: 2px solid #c20c0c;
       p{
           font-size:20px;
           color:#333;
           line-height:40px;
       }
       .commentTotal{
            color:#666;
            line-height:40px;
            margin-left:30px;
       }
   }
   .bottom{
        position:relative;
         display:flex;
         justify-content:space-between;
         margin-top:30px;
          .commentBox{
           .textbox{
               width:578px;
               textarea{
                   width:100%;
                   height:63px;
                   resize: none;
                   background-color: #fff;
                   border:1px solid #cdcdcd;
                   padding:6px 0 0 6px;
               }
           }
           .operation{
               display:flex;
               justify-content:space-between;
               .operation-right{
                  display:flex;
                  align-items:center;
                  p{
                      font-size:12px;
                      color:#999;
                  }
                  .send{
                      width:46px;
                      height:25px;
                      color:#fff;
                      line-height:25px;
                      text-align:center;
                      background-position: -84px -64px;
                      margin-left:10px;
                      cursor:pointer;
                  }
               }
           }
           .corr {
               position:absolute;
               top:11px;
               left:56px;
               em{
                  display: block;
                  font-family: "SimSun";
                  font-size: 15px;
                  font-style: normal;
                  font-weight: normal;
                  height: 10px;
                  line-height: normal;
                  color:#cdcdcd;
                }
                span{
                    display: block;
                    font-family: "SimSun";
                    font-size: 15px;
                    font-style: normal;
                    font-weight: normal;
                    height: 10px;
                    line-height: normal;
                    color:#fff;
                    margin: -10px 0 0 1px;
                 }
               }
           }
           .emoji_container{
               position:absolute;
               top:109px;
               left:0;
               z-index:999;
           }
        }
   }
   //评论区域
   .commentArea{
       .commentArea-title{
           width:100%;
           border-bottom:1px solid #ccc;
           padding-bottom:10px;
       }
       .list{
           margin-top:15px;
           padding-bottom:15px;
           border-bottom:1px dotted #ccc;
           display:flex;
           margin-bottom:10px;
           .list-left{
               margin-right:10px;
           }
           .list-right{
               flex:1;
               display:flex;
               flex-direction:column;
               justify-content:space-between;
               .time{
                    color:#999;
                }
               .comment-info{
                   display:flex;
                   .userName{
                    height:20px;
                    display:flex;
                    align-items:center;
                    a{
                        font-size:12px;
                        color:#0c73c2;
                        margin-right:6px;
                    }
                    img{
                        width:35px;
                        height:12px;
                     }
                   }
                   p{
                       flex:1;
                       margin-left:6px;
                   }
               }
         .replyInfo{
                  position:relative;
                  padding: 8px 19px;
                  margin-top: 10px;
                  line-height: 20px;
                  background: #f4f4f4;
                  border: 1px solid #dedede;
                  a{
                    color: #0c73c2;
                  }
            .replyInfoIcon{
                    position:absolute;
                    top:-9px;
                    left:15px;
               em{
                  display: block;
                  font-family: "SimSun";
                  font-size: 15px;
                  font-style: normal;
                  font-weight: normal;
                  height: 10px;
                  line-height: normal;
                  color:#dedede;
                }
                span{
                    display: block;
                    font-family: "SimSun";
                    font-size: 15px;
                    font-style: normal;
                    font-weight: normal;
                    height: 10px;
                    line-height: normal;
                    color:#f4f4f4;
                    margin: -10px 0 0 0px;
                 }
             }
         }
               .commentInfo{
                   display:flex;
                   justify-content:space-between;
                   margin-top:10px;
                   .commentArea-operation{
                       display:flex;
                       align-items:center;
                       .del{
                           margin-right:6px;
                           cursor: pointer;
                           display:none;
                       }
                       .praise{
                          display:flex;
                          align-items:center;
                           i{
                               display:inline-block;
                               width: 15px;
                               height: 14px;  
                               background:url(${icon2});
                               background-position: -150px 0;
                               margin-right:8px;
                           }
                       }
                       span{
                           margin:0 8px;
                       }
                       .reply{
                           color:#666;
                           cursor:pointer;
                       }
                   }
               }
           }
       }
       //分页
       .ant-pagination{
           display:flex;
           justify-content:center;
           .ant-pagination-disabled,.ant-pagination-prev,.ant-pagination-next{
               width:71px;
               height:26px;
               color: #cacaca;
               cursor: default;
               line-height:24px;
               background:url(${sprite_button2});
               background-position: 0 -620px;
               .anticon {
                   display:none;
               }
               a{
                   margin-left:10px;
                   font-size:12px;
               }
           }
           .ant-pagination-item{
                min-width:24px;
                height: 24px;
                /* padding: 0 1px; */
                background-color: #fff;
                line-height: 22px;
                color:#333;
            }
            .ant-pagination-item-active{
                border-color: #A2161B;
                box-sizing:border-box;
            a{
                color:#fff;
                background:url(${sprite_button2});
                background-position: 0 -650px;
            }
           }
            .ant-pagination-options{
                display:none;
             }
           }
       }
`